<!DOCTYPE html>
<html lang="en">
<head th:include="certificateWeb/headFoot :: headerCss">
</head>

<!--<link rel="stylesheet" href="/css/certificateWeb/onLineApply/onLineApply.css">-->
<link rel="stylesheet" href="/css/certificateWeb/workNews/workNews.css">
<body id="body">
<div th:include="certificateWeb/headFoot :: header"></div>
<main id="main" style="background: #fff">
    <section class="sec_1">
        <div class="form-control div_2" style="width: 1200px;">
            <label style=" font-size: 18px; margin-right: 25px; font-weight: bold">编辑报名信息</label>
            <hr/>
            <form id="formId">
            <span class="wd160" style="font-size: 14px">注意：①寸照请上传尺寸为295像素*413像素并且小于1M的照片</span>
            <span class="wd160" style="font-size: 14px">注意：②如要修改已有的个人信息请到个人资料修改，<a
                    style="border:1px solid #ff751a ;padding: 2px 4px;color:#ff751a" href="/certificate/editMy">去修改</a></span>
             <div id="userDetail"></div>
            <div class="div_input">
                <label class="span_input">考试院校<span style="color: #D52525">*</span>：</label>
<!--                <input type="hidden" th:value="${stuInfo.orgId}" id="orgId1"/>&lt;!&ndash;th:value="${stuInfo.orgId}"&ndash;&gt;-->
                <input name="orgId" th:value="${stuInfo.orgId}" id="orgId" placeholder="请选择院校" class="form-control inp_1"/>
<!--                <select name="" id="" class="form-control inp_1"></select>-->
            </div>
            <input type="hidden" th:value="${stuInfo.cbatchId}" name="cbatchId" id="chatchId"/>
            <div style="clear: both"></div>
            <input type="hidden" th:value="${stuInfo.id}" id="id" name="stuSignUpId"/>
            <div class="div_3">
                <button class="form-control but_1" type="submit" id="send">提交</button>
            </div>
            </form>
        </div>
        <div style="clear: both"></div>
    </section>
</main>
<div th:include="certificateWeb/headFoot :: footer"></div>
<script src="/js/plugins/validate/jquery.validate.extend.js"></script>

</body>
<script>

    $(function () {
        validateRule();
        //查询考点信息
        selOrg();
        // selCerOrgS();
        //查询用户信息
        selUserDetail();
    })
      $.validator.setDefaults({
        submitHandler: function () {
            save();
        }
    });
     //提交报名信息
    function save() {
        ajaxTokenForm("/jzApi/certificates/editCertificateFill", "POST", $('#formId').serialize(), function (res) {
                  location.href = '/certificate/findApplyExam';
        })
    }

    function selOrg() {
        $.ajax({
            url: "/jzApi/certificates/selCerOrgS",
            data:{cbatchId: $("#chatchId").val(),name:''},
            success: function (res) {
                console.log("机构" , res);
                $('#orgId').selectPage({
                    showField: 'name',
                    keyField: 'id',
                    data: res.data,
                    multiple: false,
                    searchField: 'name'
                });
            }
        });
    }



    /*function selCerOrgS() {
        $.ajax({
            url: '/jzApi/certificates/selCerOrgS',
            data: {cbatchId: $("#chatchId").val(),name:''},
            success: function (r) {
                if (r.code == 0) {
                    var list = r.data;
                    var orgId1 = $("#orgId1").val();
                    console.log("rr = ", orgId1);
                    var opt = '<option value="">请选择机构</option>';
                    for (var i = 0; i < list.length; i++) {
                        if (orgId1 == list[i].id) {
                            opt += '<option selected value="' + list[i].id + '">' + list[i].name + '</option>'
                        } else {
                            opt += '<option value="' + list[i].id + '">' + list[i].name + '</option>'
                        }
                    }
                    $("#orgId").html(opt);
                } else {
                    layer.msg(r.msg);
                }
            }
        });
    }*/

    function selUserDetail() {
        ajaxToken("/jzApi/user/selUserDetail", "GET", {}, function (res) {
            var a = '<div style="text-align:center">' +
                '                    <img id="test" src="' + res.headPortrait + '"/>' +
                '                </div>' +
                '                <div class="div_input">' +
                '                    <label class="span_input">寸照<span style="color: #D52525">*</span>：</label>' +
                '                    <input style="opacity:0;width: 1px;" value="' + res.headPortrait + '" id="photo" name="photo">' +
                '                    <button type="button" class="btn inp_1" style="margin-top: 45px" id="btnUpload">' +
                '                        <i class="fa fa-cloud"></i>上传寸照' +
                '                    </button>' +
                '                </div>' +
                '                <div class="div_input">' +
                '                    <label class="span_input">考生姓名<span style="color: #D52525">*</span>：</label>' +
                '                    <input type="text" id="name" name="name" value="' + res.name + '" placeholder="考生姓名"' +
                '                           class="form-control inp_1">' +
                '                </div>' +
                '                <div class="div_input">' +
                '                    <label class="span_input">身份证<span style="color: #D52525">*</span>：</label>' +
                '                    <input type="text" id="idNumber" name="idNumber" value="' + res.idNumber + '" placeholder="身份证"' +
                '                           class="form-control inp_1">' +
                '                </div>';
            $("#userDetail").html(a);
            if ($("#test").attr("src") != '') {
                $("#test").css({"width": "147px", "height": "206px", 'margin-top': '20px'});
            }
            var name = $("#name").val();
            var idNumber = $("#idNumber").val();
            var schoolName = $("#schoolName").val();
            if (name != "") {
                $("#name").attr("readonly", true);
            }
            if (idNumber != "") {
                $("#idNumber").attr("readonly", true);
            }
            if (schoolName != "") {
                $("#schoolName").attr("readonly", true);
            }

            layui.use('upload', function () {
                var upload = layui.upload;
                //执行实例
                upload.render({
                    elem: '#btnUpload', //绑定元素
                    url: '/jzApi/utils/fileImprot', //上传接口
                    size: 1000,
                    auto: false,
                    accept: 'images',
                    exts: 'jpg|png|jpeg',
                    choose: function (obj) {  //上传前选择回调方法
                        obj.preview(function (index, file, result) {
                            var flag = true;
                            // console.log(file);            //file表示文件信息，result表示文件src地址
                            var img = new Image();
                            img.src = result;
                            img.onload = function () { //初始化夹在完成后获取上传图片宽高，判断限制上传图片的大小。
                                if (img.width == 295 && img.height == 413) {
                                    obj.upload(index, file); //满足条件调用上传方法
                                } else {
                                    flag = false;
                                    layer.msg("上传的图片必须是295像素*413像素的寸照！");
                                    return false;
                                }
                            };
                            return flag;
                        });
                    },
                    done: function (r) {
                        $("#photo").val(r.data);
                        $("#test").attr("src", r.data);
                        $("#test").css({"width": "147px", "height": "206px", 'margin-top': '20px'});
                    },
                    error: function (r) {
                        layer.msg(r.msg);
                    }
                });
            });

        });
    }


    function validateRule() {
        var icon = "<i class='fa fa-times-circle'></i>";
        $("#formId").validate({
            rules: {
                photo: {
                    required: true
                },
                name: {
                    required: true
                },
                idNumber: {
                    required: true,
                    isIdentity: true
                },
                orgId: {
                    required: true
                }
            },
            messages: {
                photo: {
                    required: icon + "请上传寸照"
                },
                name: {
                    required: icon + "请填写姓名"
                },
                idNumber: {
                    required: icon + "请填写身份证号码"
                },
                orgId: {
                    required: icon + "请选择考试院校"
                }

            }
        })
    }
</script>

</html>